<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common::header('修改报价书')}">
</head>
<body bgcolor="#B9D3EE">
<center>
    <div id="app">
        <!-- 上半部分表单 -->
        <form th:action="@{/quote/maintain}" method="post" @submit.prevent="submitForm">
<!--            <input type="hidden" name="p_Enquireno" th:value="${enquireno}">-->
<!--            <input type="hidden" name="p_QuoteNo" th:value="${quoteNo}">-->
<!--            <input type="hidden" name="p_Projno" th:value="${projno}">-->
<!--            <input type="hidden" name="p_opert" th:value="${opert}">-->

            <!-- 表单内容 -->
            <table style="LINE-HEIGHT: 30px" cellSpacing="1" cellPadding="0" width="100%" bgColor="#336699" borderColorLight="#006699" border="0">
                <tr>
                    <td>
                        <table cellpadding="3" cellspacing="1" border="0" width="100%">
                            <tr bgcolor="#ffffff">
                                <td colspan="6" bgcolor="#ffffff" align="center" height="30">
                                    <h2><font color="#0070C0">报价维护</font></h2>
                                </td>
                            </tr>
                            <tr bgcolor="#ffffff">
                                <td colspan="6" bgcolor="#ffffff" align="center" height="22">
                                    <font color="blue"><b>
                                        <img src="../images/warning.gif" width="15" height="15">&nbsp;
                                        请不要在输入金额的地方输入单位（如：元、圆），直接输入数字即可。
                                    </b></font>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <!-- 动态生成的需求计划表单 -->
            <div v-for="(formData, index) in formDatas" :key="index" style="margin-bottom: 20px;">
                <!-- 需求计划 -->
                <table cellpadding="3" cellspacing="1" border="0" width="100%">
                    <tr>
                        <td colspan="6" bgcolor="#99ccff"><B>需求计划 {{ index + 1 }}</B></td>
                    </tr>
                    <tr class="t2">
                        <td>物资编码</td>
                        <td><input type="text" v-model="formData.materialCode" size="8" maxlength="12"></td>
                        <td>物资名称</td>
                        <td><input type="text" v-model="formData.materialName" size="8" maxlength="12"></td>
                        <td>计量单位</td>
                        <td><input type="text" v-model="formData.measureUnit" size="8" maxlength="12"></td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>单价(元/含税)</td>
                        <td nowrap><input type="text" v-model="formData.unitPrice" size="8" @input="calculateTotal(index)" maxlength="12"></td>
                        <td nowrap>数量</td>
                        <td nowrap><input type="text" v-model="formData.amount" size="8" @input="calculateTotal(index)" maxlength="12"></td>
                        <td nowrap>总价(元/含税)</td>
                        <td nowrap><input type="text" v-model="formData.sumPrice" size="8" readonly style="background-color: #f0f0ff"></td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>运杂费(元/含税)</td>
                        <td nowrap><input type="text" v-model="formData.mixPrice" size="8" @input="calculateTotal(index)" maxlength="12"></td>
                        <td nowrap>其他费用(元/含税)</td>
                        <td nowrap><input type="text" v-model="formData.otherPrice" size="8" @input="calculateTotal(index)" maxlength="12"></td>
                        <td nowrap>总计(元/含税)</td>
                        <td nowrap><input type="text" v-model="formData.totalPrice" size="8" readonly style="background-color: #f0f0ff"></td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>起始到货期</td>
                        <td nowrap><input type="date" v-model="formData.startDate" size="10"></td>
                        <td nowrap>结束到货期</td>
                        <td nowrap><input type="date" v-model="formData.endDate" size="10"></td>
                    </tr>
                </table>


            <!-- 下半部分表单 -->
                <!-- 下半部分表单 -->
                <table cellpadding="3" cellspacing="1" border="0" width="100%">

                    <tr bgcolor="#f2f8ff">
                        <td nowrap>报价书标题</td>
                        <td>
                            <input type="text" v-model="formData.queTitle" size="25.5" maxlength="30">
                        </td>
                        <td nowrap>报价有效期</td>
                        <td><input type="date" v-model="formData.enquireEndDate" size="10"></td>
                    </tr>
                    <tr bgcolor="#f2f8ff">
                        <td nowrap>报价说明</td>
                        <td colspan="3" style="width:100%"><textarea v-model="formData.quoRemark" rows="4" style="width:100%"></textarea></td>
                    </tr>
                </table>
            </div>
            <tr bgcolor="#f2f8ff">
                <td nowrap><a href="javascript:void(0)" @click="calculateTotalQuantity">数量合计</a></td>
                <td><input type="text" v-model="summary.quantityTotal" size="25.5" readonly class="border"></td>
                <td nowrap>总金额(元)</td>
                <td><input type="text" v-model="summary.amountTotal" size="25.5" readonly class="border"></td>
            </tr>
            <!-- 按钮 -->
            <p align="center">
                <button type="submit">修改</button>
                <button type="button" @click="goBack">返回</button>
            </p>
        </form>
    </div>
</center>

<script>
    new Vue({
        el: '#app',
        data: {
            formDatas: [{
                quoteDetailId:'',
                queTitle:'',
                quoRemark:'',
                materialCode: '',
                materialName: '',
                measureUnit: '个',
                unitPrice: 543,
                amount: 1,
                mixPrice: 0,
                otherPrice: 0,
                sumPrice: 543, // 单价 * 数量
                totalPrice: 543,// sumPrice + 运杂费 + 其他费用
                enquireEndDate: '2010-01-08',
            }],
            summary: {
                quantityTotal: 0, // 数量合计
                amountTotal: 0, // 金额合计
                queTitles: [
                    { value: "标题1" },
                    { value: "标题2" },
                    { value: "标题3" }
                ]
            }
        },
        created() {
            this.loadFormDatas();
        },
        methods: {
            loadFormDatas() {
                const queTitles = new URLSearchParams(window.location.search).get('QueTitles');
                console.log('传递的 QueTitles:', queTitles);
                if (queTitles) {
                    // 将 queTitles 转换为对象数组
                    this.summary.queTitles = queTitles.split(',').map(title => ({ value: title.trim() }));
                    axios.get('/quotede/details', {
                        params: {
                            queTitles: queTitles.split(',').join(' ') // 将多个标题传递给后端
                        }
                    }).then(response => {
                        this.formDatas = response.data; // 后端返回多个需求计划的数据
                        console.log('返回的数据:', this.formDatas);
                        // 初始化数据时，计算sumPrice和totalPrice
                        this.formDatas.forEach((formData, index) => {
                            this.calculateTotal(index);
                        });
                    });
                }
            },
            calculateTotal(index) {
                const formData = this.formDatas[index];
                const unitPrice = parseFloat(formData.unitPrice) || 0;
                const amount = parseFloat(formData.amount) || 0;
                const mixPrice = parseFloat(formData.mixPrice) || 0;
                const otherPrice = parseFloat(formData.otherPrice) || 0;

                // 计算总价（sumPrice = 单价 * 数量）
                const sumPrice = unitPrice * amount;
                // 计算总计（totalPrice = sumPrice + 运杂费 + 其他费用）
                const totalPrice = sumPrice + mixPrice + otherPrice;

                // 使用Vue的$set方法更新数据，确保响应式更新
                this.$set(formData, 'sumPrice', sumPrice);
                this.$set(formData, 'totalPrice', totalPrice);
                // 更新数量合计和总金额
                this.calculateTotalQuantity();
            },
            calculateTotalQuantity() {
                let quantityTotal = 0;
                let amountTotal = 0;
                this.formDatas.forEach(formData => {
                    quantityTotal += parseFloat(formData.amount) || 0;
                    amountTotal += parseFloat(formData.totalPrice) || 0;
                });
                this.summary.quantityTotal = quantityTotal;
                this.summary.amountTotal = amountTotal;
            },
            submitForm() {
                console.log("提交的数据:", this.formDatas);
                // 验证是否输入了有效的单价和数量
                const hasValidData = this.formDatas.every(formData => {
                    return formData.unitPrice && formData.amount && formData.quoRemark;
                });
                console.log(hasValidData);

                if (!hasValidData) {
                    alert("请输入有效的单价和数量");
                    return;
                }

                // if (this.formData.quoRemark.length > 200) {
                //     alert("说明文字不能超过200字");
                //     return;
                // }

                if (confirm("确定提交修改报价？")) {
                    // 提交表单逻辑
                    axios.post('/quotede/maintain',this.formDatas)
                        .then(response => {
                        alert(response.data.msg);
                    })
                }
            },
            goBack() {
                window.location = "Project_list.html";
            }
        }
    });
</script>
</body>
</html>